<template>
  <!-- 
  过滤器可用于一些常见文本的格式化，
  多用于倒计时和价格，过滤器里面没有this指向，必须return
  过滤器分为全局和局部
  语法:  
    全局 :  Vue.filter()定义全局过滤器
    局部:   filters()方法
    -->
  <div>
    <h3>我是APP</h3>
    <p>当前用户访问量:{{ usersNum | splitNumsComma }}</p>
    <p>价格1:{{ price1 | priceFormat(2) | add$ }}</p>
    <p>价格2:{{ price2 | priceFormat(3) | add$ }}</p>
    <MyCount />
  </div>
</template>

<script>
import MyCount from '@/components/MyCount.vue'
export default {
  data() {
    return {
      count: 0,
      usersNum: 14567352368682,
      price1: 12,
      price2: 14.1,
      price3: 18.98
    }
  },
  components: {
    MyCount
  },
  // 定义局部过滤器
  filters: {
    splitNumsComma(value) {
      // console.log(value);
      console.log(this);  // undefined
      const reg = /(\d)(?=(\d{3})+$)/g
      return String(value).replace(reg, '$1,')
    }
  }
}
</script>

<style>
</style>